<template>
  <div class="article_content">
    <div
      @click="$router.push({ path: `/articleDetail/${postArticle.id}` })"
      v-if="postArticle.type == 1 && postArticle.cover.length <= 2"
      class="single1"
    >
      <div class="left">
        <div class="title">
          <h4>{{ postArticle.title }}</h4>
        </div>
        <div class="info">
          <span class="nickname">{{ postArticle.user.nickname }}</span>
          <span class="comment">{{ postArticle.comment_length }}跟帖</span>
        </div>
      </div>
      <div class="right">
        <img
          v-for="(item, index) in postArticle.cover"
          :key="index"
          :src="axios.defaults.baseURL + item.url"
          alt=""
        />
      </div>
    </div>
    <div
      @click="$router.push({ path: `/articleDetail/${postArticle.id}` })"
      v-else-if="postArticle.type == 1 && postArticle.cover.length > 2"
      class="single2"
    >
      <div class="top">
        <h4>{{ postArticle.title }}</h4>
      </div>
      <div class="bottom">
        <div v-for="(item, index) in postArticle.cover" :key="index">
          <img :src="axios.defaults.baseURL + item.url" alt="" />
        </div>
      </div>
    </div>

    <div
      @click="$router.push({ path: `/articleDetail/${postArticle.id}` })"
      v-else-if="postArticle.type == 2"
      class="single3"
    >
      <div class="title">
        <h4>{{ postArticle.title }}</h4>
      </div>
      <div class="playaera">
        <img :src="axios.defaults.baseURL + postArticle.cover[0].url" alt="" />
        <div class="playicon">
          <van-icon name="play" />
        </div>
      </div>
      <div class="info">
        <span class="nickname">{{ postArticle.user.nickname }}</span>
        <span class="comment">{{ postArticle.comment_length }}跟帖</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/myaxios.js";
export default {
  props: {
    postArticle: {
      required: true,
      type: Object,
    },
  },
  data() {
    return {
      axios,
    };
  },
  mounted() {
    // console.log(this.postArticle);
  },
};
</script>

<style lang="less" scoped>
body {
  overflow-x: hidden;
  overflow-y: hidden;
}
.article_content {
  width: 100vw;
  .single1 {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    box-sizing: border-box;
    align-items: center;
    border-bottom: 1px solid #ccc;
    .left {
      flex: 1;
      display: flex;
      height: 70 * 100vw/360;
      flex-direction: column;
      justify-content: space-around;
      overflow: hidden;
      padding: 0 10px;
      flex-wrap: wrap;
      .title h4 {
        line-height: 24px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .info {
        font-size: 12px;
        color: #999;
        .nickname {
          padding-right: 10px;
        }
      }
    }
    .right {
      img {
        width: 120 * 100vw/360;
        height: 70 * 100vw/360;
        object-fit: cover;
        padding-right: 5px;
      }
    }
  }
  .single2 {
    width: 100vw;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ccc;
    padding: 15px 0;
    .bottom {
      display: flex;
      justify-content: space-around;
      padding: 10px 0 0 0;
      // overflow: auto;
      > div {
        flex: 1;
        padding-right: 5px;
        img {
          width: 100%;
          height: 100%;
          // width: 120 * 100vw/360;
          // height: 70 * 100vw/360;
          object-fit: cover;
          // padding-right: 5px;
        }
      }
      > div:nth-child(1) {
        padding-left: 5px;
      }
    }
  }
  .single3 {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    .title {
      padding-left: 10px;
    }
    .playaera {
      width: 100%;
      position: relative;
      margin: 10px 0;
      img {
        width: 100%;
        display: block;
      }
      .playicon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.4);
        box-shadow: 0px 0px 15px #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        .van-icon {
          font-size: 40px;
          color: #fff;
          text-align: center;
        }
      }
    }
    .info {
      font-size: 12px;
      color: #999;
      .nickname {
        padding-right: 10px;
      }
    }
  }
}
</style>